<template>
    <view class="Articles_MSG_add">
        <u-toast ref="uToast"></u-toast>
        <!-- 取 -->
        <view class="address flex_al_cen_ju_bet">
            <view class="Tack flex_b">
                <!-- 跑腿 -->
                <view class="left text_ovf leftwidth">
                    <template v-if="item.GoodsTypeShow || TitleShow == false">
                        <view class="from add" :class="statusShow?'bg_aa':''">取</view>
                    </template>
                    <template v-if="item.taskTypeShow">
                        <view class="from add" :class="statusShow?'bg_aa':''">
                            {{ item.riderDo == 0 ? "送" : item.riderDo == 1 ? "买" : item.riderDo == 2 ? "取" : "买" }}
                        </view>
                    </template>
                    <text v-if="TitleShow" :class="item.statusShow?'color_aa':''">
                        {{
                            item.riderToMerchantDistance == undefined ? item.pickAddressDistance + "km" : item.riderToMerchantDistance + "km"
                        }}
                    </text>
                </view>
                <!--外卖取货地址-->
                <view class="add" v-if="item.orderType == 0">
                    <view :class="Type == 1 ? 'H2' : 'H4'">
                        <text :class="statusShow?'color_aa':''">{{ item.merchantName }}</text>
                    </view>
                    <!-- <view :class="Type == 1 ? 'H2' : 'H4'">附近三公里购买</view> -->
                    <view class="phone" v-if="TitleShow">
                        {{ item.pickAddress }}
                    </view>
                </view>
                <!--跑腿取货地址-->
                <view class="add" v-else>
                    <view :class="Type == 1 ? 'H2' : 'H4'">
                        <text :class="item.statusShow?'color_aa':''">{{ item.pickAddress }}</text>
                    </view>
                    <!-- <view :class="Type == 1 ? 'H2' : 'H4'">附近三公里购买</view> -->
                    <view class="phone" :class="item.statusShow?'color_aa':''"
                          v-if="item.pickPhone && item.riderDo != 0">
                        {{ item.pickName }}
                        {{
                            item.pickPhone.substring(0, 3) + "****" + item.pickPhone.substring(item.pickPhone.length - 4)
                        }}
                    </view>
                </view>
            </view>
            <!-- 占位 -->
            <template v-if="Type == 1">
                <view>
                    <!-- 导航 -->
                    <view class="navigation" v-if="item.sfBuy == 0"
                          @click.stop="getCoordinate( item.pickAddress, item.startingLongitude, item.startingLatitude )">
                        <image v-if="!statusShow" src="../static/images/pulice/navigation.png" mode="scaleToFill"/>
                        <image v-else src="../static/images/pulice/navigation_b.png" mode="scaleToFill"/>
                    </view>
                </view>
            </template>
        </view>
        <!-- 收 -->
        <view class="address flex_al_cen_ju_bet">
            <view class="To flex">
                <view class="left text_ovf leftwidth">
                    <view class="to add" :class="statusShow?'bg_aa':''">收</view>
                    <text v-if="TitleShow && Type != 1" :class="statusShow?'color_aa':''">
                        {{
                            item.riderToUserDistance == undefined ? item.receiveAddressDistance + "km" : item.riderToUserDistance + "km"
                        }}
                    </text>
                </view>

                <!-- 外卖收货地址 -->
                <view class="add" v-if="item.orderType == 0">
                    <view :class="Type == 2 ? 'H2' : 'H4'">
                        <text :class="statusShow?'color_aa':''">{{ item.receiveAddress }}</text>
                    </view>
                    <view class="phone" v-if="item.phone && TitleShow">
                        {{ item.pickName }}
                        {{ item.phone.substring(0, 3) + "****" + item.phone.substring(item.phone.length - 4) }}
                    </view>
                </view>

                <!-- 跑腿收货地址 -->
                <view class="add" v-if="item.orderType == 1">
                    <view :class="Type == 2 ? 'H2' : 'H4'">
                        <text :class="item.statusShow?'color_aa':''">{{ item.receiveAddress }}</text>
                    </view>
                    <!-- <view :class="Type == 1 ? 'H2' : 'H4'">附近三公里购买</view> -->
                    <view class="phone" v-if="item.receiveName && Type != 0">
                        {{ item.receiveName }}
                        {{
                            item.receivePhone.substring(0, 3) + "****" + item.receivePhone.substring(item.receivePhone.length - 4)
                        }}
                    </view>
                </view>
            </view>
            <!-- 占位 -->
            <template v-if="Type == 2">
                <view>
                    <!-- 导航 -->
                    <view class="navigation" getCoordinate
                          @click.stop="getCoordinate( item.receiveAddress, item.terminalLongitude, item.terminalLatitude )">
                        <image v-if="!statusShow" src="../static/images/pulice/navigation.png" mode="scaleToFill"/>
                        <image v-else src="../static/images/pulice/navigation_b.png" mode="scaleToFill"/>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup lang="ts">
import {defineProps, ref} from "vue";
import Address from "@/Hooks/Home/components/Address";

const {getCoordinate} = Address();
/**
 *     @param  {Type}// 订单状态 {0,1,2}
 *     @param { orderType }  0 外卖  1  跑腿
 *     @param { Adddesc } 是否显示用户信息
 *     @param { pickAddress } 取货地址
 *     @param { receiveAddress }  收货地址
 *     @param { riderToUserDistance }  骑手到用户的距离
 *     @param { riderToMerchantDistance } 骑手到商家的距离
 * }  组件配置
 */
const Props = defineProps<Props>();

interface Props {
    Type?: number; //
    orderType?: number;
    item: any;
    TitleShow: any;
    statusShow: any;
}
</script>
<style lang="scss" scoped>
@import "../static/css/component/address.scss";
</style>